<template>
  <div class="outside">

    <div class="playlist-top" @click="ToBestPlaylist(tagName)">
      <div class="backgroundimg" :style="{backgroundImage:'url(' + backgroundimage + ')'}"></div>
      <div class="intro">
        <img :src="backgroundimage">
        <div >
          <div class="bestplaylist"> 
            <i class="iconfont icon-huangguan" style="font-size: 13px;"></i> 
          精品歌单</div>
          <div class="name">{{name}}</div>
          <div class="copywriter">{{copyWriter}}</div>
        </div>
      </div>
    </div>

    <div class="tags">
      <div class="popover">
        <div class="qbgd" @click="changeId(0)">全部歌单</div>

        <div class="tagCatItem" v-for="(item,i) in tagCate">
          <div class="tagTitleItem">
            <i class='iconfont' :class="icon[i]" style="font-size: 20px;"></i>
            {{item}}</div>
          <div class="tagItem">
            <span v-for="items in tagType[i]" class="item">
              <span @click="changeId(items.id)" 
                    :class="{activeTag:id === items.id}">{{items.name}}</span>
            </span>
          </div>
          
        </div>

      </div>

      <div class="tagButton" slot="reference" @click="selectTags">{{tagName?tagName:'全部歌单'}} 
        <i class="iconfont icon-prev"></i>
      </div>

      <div class="tagcat">
        <span v-for="(item,i) in showTag" 
              :class="{activeTag:id === item.id}" 
              @click="changeId(item.id)">{{item.name}}</span>
      </div>
    </div>

    <play-list :List="List" 
               :total='total' 
               style="margin-bottom: 50px;"
               @handleCurrentChange="CurrentChange"></play-list>
  </div>
</template>

<script>
import {request} from 'network/request'
import PlayList from 'views/discover/childroute/recommend/childComps/recPlaylist'
// import {parseList} from 'common/function.js'
export default {
  name:'Playlists',
  components:{
    PlayList
  },
  data(){
    return{
      backgroundimage:'',
      tags:[],
      activeIndex:0,
      name:'',
      copyWriter:'',
      showTag:[],
      id:5001,
      tagName:'华语',
      tagType:[],
      tagCate:['语种','风格','场景','情感','主题'],
      icon:['icon-yuzhong','icon-fengge1','icon-chabei','icon-qinggan','icon-fengge'],
      List:[],
      total:0,
      offset:0
    }
  },
  methods:{
    async setCoverImg(){
      const data = await request('GET','top/playlist/highquality',{limit:1,cat:this.tagName})
      this.backgroundimage = data.playlists[0].coverImgUrl
      this.name = data.playlists[0].name
      this.copyWriter = data.playlists[0].copywriter
    },
    async getTag(){
      const data = await request("GET",'playlist/highquality/tags')
      this.tags = data.tags
      this.showTag = this.tags.filter(tag => {
        return tag.type == 0
      })
      for(let i = 0 ; i < 5 ; i++){
        let arr = this.tags.filter(result => {
          return result.category == i
        })
        this.tagType.push(arr)
      }
    },
    async getPlayList(){
      const data = await request("GET",'top/playlist',{limit:50,cat:this.tagName,offset:this.offset})
      this.List = data.playlists
      if(data.more){
        this.total = data.total
      }
    },
    selectTags(){
      let popover = document.querySelector('.popover')
      popover.style.display = popover.style.display === 'block' ? 'none' : 'block'
    },
    changeId(id){
      this.id = id
    },
    CurrentChange(newPage){
      this.offset = 50*(newPage-1)
      this.getPlayList()
    },
    ToBestPlaylist(cat){
      cat = cat.replace('/',':')
      this.$router.push('/discover/playlist/bestplaylist/' + cat)
    }
  },
  async mounted(){
    await this.getTag()
    await this.setCoverImg()
  },
  created(){
    this.getPlayList()
  },
  watch:{
    id(){
      if(this.id == 0){
        this.tagName = null
      }else{
        let arr = this.tags.filter(result => {
          return result.id === this.id
        })
        this.tagName = arr[0].name
      }
      this.setCoverImg()
      this.getPlayList()
    }
  }
}
</script>

<style scoped>
  .outside{
    display:flex;
    justify-content: center;
    flex-direction: column;
    margin: 10px 88px;
  }
  .playlist-top{
    height: 170px;
    border-radius:8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  .playlist-top .backgroundimg{
    height: 200%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(40px);
  }
  .intro{
    position: absolute;
    top:0;
    display: flex;
  }
  .intro img{
    margin: 15px;
    width:140px;
    height:140px;
    border-radius: 5px;
  }
  .bestplaylist{
    width: 69px;
    color:rgb(231,170,90) ;
    border: 1px solid rgb(231,170,90);
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 13px;
    margin:35px 0 0 ;
  }
  .name{
    font-size: 16px;
    color: #fff;
    margin: 15px 0 10px;
  }
  .copywriter{
    color: #fff;
    opacity: .5;
    font-size: 12px;
  }
  .tags{
    /* width: 100%; */
    margin: 20px 0;
    position: relative;
  }
  .tagButton{
    border: 1px solid rgb(216,216,216);
    width: 100px;
    padding: 4px;
    text-align: center;
    background-color: #fff;
    border-radius: 30px;
    color: var(--font-color);
    cursor: pointer;
    font-size: 14px;
  }
  .tagButton:hover{
    background-color:rgb(242,242,242);
  }
  .popover{
    width: 750px;
    height: 600px;
    position: absolute;
    top:35px;
    display: none;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    color:rgb(55,55,55);
    background-color: #fff;
    z-index: 100;
  }
  .qbgd{
    padding: 18px 0 18px 35px;
    font-size: 14px;
    border-bottom: 1px solid rgb(229,229,229);
  }
  .qbgd:hover{
    color:var(--netease-color)
  }
  .tagcat{
    /* width: 800px; */
    position: absolute;
    right: 0;
    top: 0;
  }
  .tagcat span{
    cursor: pointer;
    font-size: 12px;
    color: rgb(103,103,103);
    padding: 2px 9px;
    border-radius:30px;
  }
  .tagcat .activeTag{
    color: var(--netease-color);
    background-color: rgb(253,245,245);
  }
  .tagCatItem{
    display: flex;
    padding:15px 0
  }
  .tagTitleItem{
    width: 20%;
    /* height: 50px; */
    /* line-height: 50px; */
    text-align: center;
    height: 30px;
    color: rgb(207,207,207);
    /* padding-top: 2px; */
  }
  .tagItem{
    width: 80%;
    /* word-break: keep-all; */
    /* display: flex;  */
    /* justify-content: space-around;  */
  }
  .item{
    display: inline-block;
    width: 100px;
    font-size: 14px;
    padding-bottom: 20px;
  }
  .item span{
    color:var(--font-color);
    padding: 4px 10px;
    border-radius: 30px;
    cursor: pointer;
  }
  .item span:hover{
    color: var(--netease-color);
    background-color: rgb(253,245,245);
  }
  .item .activeTag{
    color: var(--netease-color);
    background-color: rgb(253,245,245);
  }
  .icon-prev{
    position: relative;
    top:1px;
  }
</style>